<template>
    <div>
        <el-card shadow="hover" class="juque_search_form">
            <div>
                <el-form ref="searchFormRef" size="default" :inline="true" :model="formModel">
                    <el-form-item label="任务名称" prop="param.taskName">
                        <el-input v-model="formModel.param.taskName" show-word-limit maxlength="50" placeholder=""
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="任务类型" prop="param.taskType">
                        <el-select v-model="formModel.param.taskType" placeholder="">
                            <el-option v-for="item in DictInfo.taskType" :key="item.key" :label="item.label"
                                :value="item.key" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="源库" prop="param.sourceDatabase">
                        <DatabaseSelect ref="sourceDatabaseRef" @on-select="onSelectSourceDatabase">
                        </DatabaseSelect>
                    </el-form-item>
                    <el-form-item label="目标库" prop="param.targetDatabase">
                        <DatabaseSelect ref="targetDatabaseRef" @on-select="onSelectTargetDatabase"></DatabaseSelect>
                    </el-form-item>
                    <el-form-item label="目标表" prop="param.targetTable">
                        <el-input v-model="formModel.param.targetTable" show-word-limit maxlength="100" placeholder=""
                            clearable></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button size="default" type="primary" @click="onSearch">
                            <el-icon>
                                <ele-Search />
                            </el-icon>
                            查询
                        </el-button>
                        <el-button size="default" type="default" @click="onRest">
                            <el-icon>
                                <ele-RefreshLeft />
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card shadow="hover">
            <el-button-group class="juque_button_group">
                <el-button size="default" type="success" @click="onAdd">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增
                </el-button>
            </el-button-group>
            <el-table :data="datasource" :border="true" class="juque_table">
                <el-table-column prop="taskName" label="任务名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="taskType" label="任务类型" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag>{{ taskTypeCompute(scope.row.taskType) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="taskStatus" label="任务状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag>{{ taskStatusCompute(scope.row.taskStatus) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sourceDatabaseName" label="源库" show-overflow-tooltip></el-table-column>
                <el-table-column prop="targetDatabaseName" label="目标库" show-overflow-tooltip></el-table-column>
                <el-table-column prop="targetTable" label="目标表" show-overflow-tooltip></el-table-column>
                <el-table-column prop="targetOperateType" label="操作类型" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag>{{ targetOperateTypeCompute(scope.row.targetOperateType) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="clearByBefore" label="执行前是否清数" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag>{{ yesOrNoCompute(scope.row.clearByBefore) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onTriggerEnable(scope.row.id)">
                            <div v-if="scope.row.taskStatus === -1">
                                <el-icon>
                                    <ele-Open />
                                </el-icon>
                                启动
                            </div>
                            <div v-else>
                                <el-icon>
                                    <ele-TurnOff />
                                </el-icon>
                                禁用
                            </div>
                        </el-button>
                        <el-button size="small" text type="primary" @click="onEdit(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            修改
                        </el-button>
                        <el-button size="small" text type="primary" @click="onDetail(scope.row)">
                            <el-icon>
                                <ele-View />
                            </el-icon>
                            详情
                        </el-button>
                        <el-popover placement="top">
                            <p class="juque_popover_p">确定删除吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="small" text>取消</el-button>
                                <el-button size="small" type="primary" @click="onDelete(scope.row)">确认</el-button>
                            </div>
                            <template #reference>
                                <el-button size="small" text type="primary">
                                    <el-icon>
                                        <ele-DeleteFilled />
                                    </el-icon>
                                    删除
                                </el-button>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 20, 30, 50]" v-model:current-page="formModel.pageInfo.page" background
                v-model:page-size="formModel.pageInfo.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="formModel.pageInfo.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, ref, onMounted, computed, } from 'vue';
import type { FormInstance } from 'element-plus';
import { TaskInfoSearchParamModel, TaskInfoListModel } from '/@/interfaces/DataPipelineModel';
import { handleSearch, handleDel, handleDetail, handleTriggerEnable, } from '../task-info-wrap';
import MESSAGE from '/@/enums/message-enum';
import useObjectUtil from '/@/utils/objectUtil';
import { BaseRequest } from '/@/interfaces/BaseModel';
import { DictInfo } from '/@/enums/dict-info-enum';
import DatabaseSelect from '/@/views/database-info/component/database-select.vue';
import TaskScriptSelect from '/@/views/task-script/component/task-script-select.vue';

interface State {
    datasource: TaskInfoListModel[],
    formModel: BaseRequest<TaskInfoSearchParamModel>,
}
export default defineComponent({
    name: 'TaskInfoList',
    components: { DatabaseSelect, TaskScriptSelect },
    emits: ['onAdd', 'onEdit', 'onDetail'],
    setup(props, context) {
        const searchFormRef = ref<FormInstance>();
        const state = reactive<State>({
            datasource: [],
            formModel: {
                param: {
                    taskName: undefined,
                    taskType: undefined,
                    sourceDatabase: undefined,
                    targetDatabase: undefined,
                    targetTable: undefined,
                },
                pageInfo: {
                    page: 1,
                    limit: 10,
                    total: 0
                }
            },
        });
        const taskTypeCompute = computed(() => {
            return function (value: number) {
                const dictInfo = DictInfo.taskType.filter(item => item.key === value);
                return dictInfo ? dictInfo[0].label : value;
            }
        });
        const targetOperateTypeCompute = computed(() => {
            return function (value: number) {
                const dictInfo = DictInfo.targetOperateType.filter(item => item.key === value);
                return dictInfo ? dictInfo[0].label : value;
            }
        });
        const yesOrNoCompute = computed(() => {
            return function (value: number) {
                const dictInfo = DictInfo.yesOrNo.filter(item => item.key === value);
                return dictInfo ? dictInfo[0].label : value;
            }
        });
        const taskStatusCompute = computed(() => {
            return function (value: number) {
                const dictInfo = DictInfo.taskStatus.filter(item => item.key === value);
                return dictInfo ? dictInfo[0].label : value;
            }
        });
        const methodMap = reactive({
            onSearch: async function () {
                const response = await handleSearch(state.formModel);
                const { code, data, pageInfo } = response;
                if (code === MESSAGE.OK) {
                    useObjectUtil.copyProperties(pageInfo, state.formModel.pageInfo);
                    state.datasource = data ? [...data] : [];
                }
            },
            onRest: function () {
                searchFormRef.value?.resetFields();
                sourceDatabaseRef.value.resetField();
                targetDatabaseRef.value.resetField();
            },
            onAdd: function () {
                context.emit('onAdd');
            },
            onEdit: async function (record: TaskInfoListModel) {
                if (record && record.id) {
                    const result = await handleDetail(record.id);
                    const { data } = result;
                    context.emit('onEdit', data);
                }
            },
            onTriggerEnable: async function (id: string) {
                await handleTriggerEnable(id);
                methodMap.onSearch();
            },
            onDetail: async function (record: TaskInfoListModel) {
                if (record && record.id) {
                    const result = await handleDetail(record.id);
                    const { data } = result;
                    context.emit('onDetail', data);
                }
            },
            onDelete: async function (record: TaskInfoListModel) {
                if (record && record.id) {
                    await handleDel([record.id]);
                    methodMap.onSearch();
                }
            },

            onHandleSizeChange: function (val: number) {
                state.formModel.pageInfo.limit = val;
                methodMap.onSearch();
            },
            onHandleCurrentChange: function (val: number) {
                state.formModel.pageInfo.page = val;
                methodMap.onSearch();
            },
            onSelectSourceDatabase: function (value: string) {
                if (value) {
                    state.formModel.param.sourceDatabase = value;
                }
            },
            onSelectTargetDatabase: function (value: string) {
                if (value) {
                    state.formModel.param.targetDatabase = value;
                }
            },
        });
        // 挂载完成后
        onMounted(async () => {

        });
        const sourceDatabaseRef = ref();
        const targetDatabaseRef = ref();
        return {
            searchFormRef,
            sourceDatabaseRef,
            targetDatabaseRef,
            DictInfo,
            taskTypeCompute,
            targetOperateTypeCompute,
            yesOrNoCompute,
            taskStatusCompute,
            ...toRefs(state),
            ...toRefs(methodMap),
        };
    },
});
</script>
<style scoped lang="scss">
@import '/@/views/task-info/task-info.scss';
</style>
